<template>

  <div>
    <div class="outer-box" style="height: 100%;display: flex;width: 100%;">

      <div class="aside-outer-box" style=";flex: 1;padding: 10px;">
        <div style="width: 100%;">

          <!-- 头像信息卡 -->
          <div style="display: flex;justify-content: center;">
            <div class="my-card card-border"
                 style="padding-bottom: 10px;width: 250px;border: 2px solid var(--box-border-color);border-radius: 10px;">
              <div class="avatar-box"
                   style="margin-top:5px;width: 100%;height: 100px;display: flex;justify-content: center;align-items: center;">
                <el-avatar class="myAvatar" shape="circle" style="width: 80px;height: 80px"
                           :src="require('@/assets/img/myAvatar.jpeg')"/>
              </div>
              <div class="my-card-title"
                   style="width: 100%;display: flex;justify-content: center;align-items: center;">
                <div class="tooltip-container">
                  <span class="tooltip">LKZYBlog</span>
                  <span class="text">掠空之翼博客 👨‍💻</span>
                  <span>欢迎浏览! 👋</span>
                </div>
              </div>
              <div class="my-card-data"
                   style="user-select: none;margin-top: 5px;display: flex;justify-content: center;align-items: center">

                <div>
                  <el-icon>
                    <Collection/>
                  </el-icon>
                  {{ myCardData.articleCount }}<br/>
                  <i style="color: var(--text-primary-color);font-style: normal;font-weight: bold">文章</i>

                </div>
                <div>
                  <el-icon>
                    <PriceTag/>
                  </el-icon>
                  {{ myCardData.tagCount }}<br/>
                  <i style="color: var(--text-primary-color);font-style: normal;font-weight: bold">标签</i>

                </div>
                <div>
                  <el-icon>
                    <ChatLineRound/>
                  </el-icon>
                  {{ myCardData.message }}<br/>
                  <i style="color: var(--text-primary-color);font-style: normal;font-weight: bold">留言</i>
                </div>
              </div>


            </div>

          </div>

          <!-- 外联 -->

          <div class="card-border link-card"
               style="margin-top: 10px;padding: 10px 0;display: flex;justify-content: center;">
            <div style="flex: 1;text-align: center">
              <el-popover placement="top" trigger="hover">
                <template #reference>
                  <span class="iconfont icon-qq"></span>
                </template>
                <el-image :src="require('@/assets/img/qqQR.png')"/>
                <p style="text-align: center;font-size: 0.8rem;font-weight: bold">QQ:2384963497</p>
              </el-popover>
            </div>
            <div style="flex: 1;text-align: center">
              <el-popover placement="top" trigger="hover">
                <template #reference>
                  <span class="iconfont icon-weixin"></span>
                </template>
                <el-image :src="require('@/assets/img/wechatQR.png')"/>
                <p style="text-align: center;font-size: 0.8rem;font-weight: bold">微信号:lkzy7777777</p>
              </el-popover>
            </div>

            <div style="flex: 1;text-align: center">
              <el-popover placement="top" trigger="hover">
                <template #reference>
                  <span class="iconfont icon-email1"></span>
                </template>
                <p style="text-align: center;font-size: 0.6rem;font-weight: bold">邮箱:2384963497@qq.com</p>
              </el-popover>
            </div>


            <div style="flex: 1;text-align: center;cursor: pointer">
              <a href="https://github.com/2384963497?tab=repositories" target="_blank"><span
                  class="iconfont icon-GitHub"></span></a>
            </div>
            <div style="flex: 1;text-align: center;cursor: pointer">
              <a href="https://gitee.com/lkzy233" target="_blank">
                <span class="iconfont icon-gitee"></span></a>
            </div>

          </div>

          <!-- 网站介绍 -->
          <div class="note-card card-border" style="
          margin-top: 10px;
          width: 100%;
          background: #fff;
          background-image: linear-gradient(var(--box-bg-color) 1.1rem, #ccc 1.2rem);
          background-size: 100% 1.2rem;
          line-height: 1.2rem;
          border-radius: 10px;
          border: 2px solid var(--box-border-color);
          text-align: center;
          padding-left: 20px;
          padding-right: 3px;
          padding-top: 1rem;
          padding-bottom: 1rem;
          z-index: 0;
          word-break: break-word;">
            <p style="font-weight: bold;font-size: 1rem;">网站介绍</p>
            这是我的个人博客网站, 更新自己的IT学习笔记, 分享自己的项目和遇到的BUG和困难; 通过这种方式认识更多小伙伴<span
              style="font-size: 1rem">✏️</span>
          </div>

          <!-- 标签统计 -->
          <div class="tag-card card-border">
            <div class="tag-title-point"></div>
            <div class="tag-title-point"></div>
            <div class="tag-title-point"></div>


            <!-- tag list -->
            <div class="tag-list" style="margin-top: 10px;display: flex;justify-content: center;flex-wrap: wrap">
              <el-tag v-for="tag in tags" class="tag-list-item" :style="{backgroundColor:tag.color}">
                {{ tag.count }} : {{ tag.text }}
              </el-tag>
            </div>


            <!-- Echarts -->
            <div ref="tagEcharts" style="width: 100%;height: 150px;"></div>

          </div>


        </div>
      </div>
      <div class="article-list-outer-box" style="flex: 3;padding: 10px;overflow: hidden;">
        <div style="width: 100%;">
          <div
              :class="['article-item-outer-box', article.id%2==0 ? 'article-item-outer-box-left' : 'article-item-outer-box-right']"
              v-for="article in articleList" :key="article.id"
              @click="queryArticle(article.id)">

            <div class="thumbnail-box" :style="{'order': article.id%2==0?0:1,
            'background-image': 'url('+ article.thumbnail +')'}">
              <!--<el-image :src="article.thumbnail"></el-image>-->
            </div>
            <div class="article-info-box">
              <p class="article-title">标题{{ article.title }}</p>
              <p class="article-description">描述{{ article.description }}</p>
              <p class="article-tags">
                <span v-for="tag in article.tags" style="margin: 0 5px">
                <el-tag>{{ tag.text }}</el-tag>
              </span>
              </p>
            </div>

          </div>

        </div>
        <el-pagination
            style="width: 100%;margin: 20px auto"
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            small="small"
            background="true"
            layout="prev, pager, next"
            :total="500"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>

    </div>

  </div>

</template>
<script>

import * as echarts from "echarts"
import {ChatLineRound, Collection, Guide, PriceTag} from "@element-plus/icons-vue";
import '@/assets/icon/font_80xq01xw5sw/iconfont.css'


import "animate.css"
import {WOW} from 'wowjs'

new WOW().init();

export default {
  components: {ChatLineRound, Guide, PriceTag, Collection},

  data() {
    return {
      myCardData: {
        articleCount: 26,
        tagCount: 12,
        message: 26
      },
      tags: [
        {
          text: '前端',
          color: `#ec9d00`,
          count: 23
        }, {
          text: 'java',
          color: `#04997c`,
          count: 31
        }, {
          text: '项目',
          color: `#7107e1`,
          count: 3
        }, {
          text: 'Other',
          color: `#0453d1`,
          count: 6
        }
      ],
      articleList: [
        {
          id: 1,
          title: '我的个人博客项目开发日记',
          createTime: `2024-2-1`,
          viewCount: `652`,
          tags: [
            {
              text: '前端',
              color: `#ec9d00`
            }, {
              text: 'java',
              color: `#04997c`
            }, {
              text: '项目',
              color: `#7107e1`
            }
          ],
          thumbnail: `https://th.bing.com/th/id/OIP.nRAC2BNJUn1_51aM89n5tgHaG2?rs=1&pid=ImgDetMain`,
          description: `这是一个前端基于vue3后端基于springboot+MybatisPlus的个人博客项目，项目地址为的美少女才能够老毒奶够老毒奶粉工号牌太阳花没难度上档次保宁醋十点半是的呢富士康首付款是男是女覅十多年的是你双方够老毒奶粉工号牌太阳花没难度上档次保宁醋十点半是的呢富士康首付款是男是女覅十多年的是你双方粉工号牌太阳花没难度上档次保宁醋十点半是的呢富士康首付款是男是女覅十多年的是你双方各in啥地方女生`,
          commentCount: 26
        },
        {
          id: 2,
          title: '我的个人博客项目开发日记',
          createTime: `2024-2-1`,
          viewCount: `652`,
          tags: [
            {
              text: '前端',
              color: `#ec9d00`
            }, {
              text: 'java',
              color: `#04997c`
            }, {
              text: '项目',
              color: `#7107e1`
            }
          ],
          thumbnail: `https://storage.googleapis.com/chydlx/codepen/blog-cards/image-1.jpg`,
          description: `这是一个前端基于vue3后端基于springboot+MybatisPlus的个人博客项目，项目地址为的美少女才能够老毒奶粉工号牌太阳花没难度上档次保宁醋十点半是的呢富士康首付款是男是女覅十多年的是你双方各in啥地方女生`,
          commentCount: 26
        },
        {
          id: 3,
          title: '我的个人博客项目开发日记',
          createTime: `2024-2-1`,
          viewCount: `652`,
          tags: [
            {
              text: '前端',
              color: `#ec9d00`
            }, {
              text: 'java',
              color: `#04997c`
            }, {
              text: '项目',
              color: `#7107e1`
            }
          ],
          thumbnail: `https://storage.googleapis.com/chydlx/codepen/blog-cards/image-1.jpg`,
          description: `这是一个前端基于vue3后端基于springboot+MybatisPlus的个人博客项目，项目地址为的美少女才能够老毒奶粉工号牌太阳花没难度上档次保宁醋十点半是的呢富士康首付款是男是女覅十多年的是你双方各in啥地方女生`,
          commentCount: 26
        },
        {
          id: 4,
          title: '我的个人博客项目开发日记',
          createTime: `2024-2-1`,
          viewCount: `652`,
          tags: [
            {
              text: '前端',
              color: `#ec9d00`
            }, {
              text: 'java',
              color: `#04997c`
            }, {
              text: '项目',
              color: `#7107e1`
            }
          ],
          thumbnail: `https://storage.googleapis.com/chydlx/codepen/blog-cards/image-1.jpg`,
          description: `这是一个前端基于vue3后端基于springboot+MybatisPlus的个人博客项目，项目地址为的美少女才能够老毒奶粉工号牌太阳花没难度上档次保宁醋十点半是的呢富士康首付款是男是女覅十多年的是你双方各in啥地方女生`,
          commentCount: 26
        },
        {
          id: 5,
          title: '我的个人博客项目开发日记',
          createTime: `2024-2-1`,
          viewCount: `652`,
          tags: [
            {
              text: '前端',
              color: `#ec9d00`
            }, {
              text: 'java',
              color: `#04997c`
            }, {
              text: '项目',
              color: `#7107e1`
            }
          ],
          thumbnail: `https://storage.googleapis.com/chydlx/codepen/blog-cards/image-1.jpg`,
          description: `这是一个前端基于vue3后端基于springboot+MybatisPlus的个人博客项目，项目地址为的美少女才能够老毒奶粉工号牌太阳花没难度上档次保宁醋十点半是的呢富士康首付款是男是女覅十多年的是你双方各in啥地方女生`,
          commentCount: 26
        },
        {
          id: 6,
          title: '我的个人博客项目开发日记',
          createTime: `2024-2-1`,
          viewCount: `652`,
          tags: [
            {
              text: '前端',
              color: `#ec9d00`
            }, {
              text: 'java',
              color: `#04997c`
            }, {
              text: '项目',
              color: `#7107e1`
            }
          ],
          thumbnail: `https://storage.googleapis.com/chydlx/codepen/blog-cards/image-1.jpg`,
          description: `这是一个前端基于vue3后端基于springboot+MybatisPlus的个人博客项目，项目地址为的美少女才能够老毒奶粉工号牌太阳花没难度上档次保宁醋十点半是的呢富士康首付款是男是女覅十多年的是你双方各in啥地方女生`,
          commentCount: 26
        },
        {
          id: 7,
          title: '我的个人博客项目开发日记',
          createTime: `2024-2-1`,
          viewCount: `652`,
          tags: [
            {
              text: '前端',
              color: `#ec9d00`
            }, {
              text: 'java',
              color: `#04997c`
            }, {
              text: '项目',
              color: `#7107e1`
            }
          ],
          thumbnail: `https://storage.googleapis.com/chydlx/codepen/blog-cards/image-1.jpg`,
          description: `这是一个前端基于vue3后端基于springboot+MybatisPlus的个人博客项目，项目地址为的美少女才能够老毒奶粉工号牌太阳花没难度上档次保宁醋十点半是的呢富士康首付款是男是女覅十多年的是你双方各in啥地方女生`,
          commentCount: 26
        },
      ],
      currentPage: 1,
      pageSize: 7,
      total: 35
    }
  },
  methods: {
    renderChart(chart) {
      // 在这里使用ECharts的API来配置和渲染图表
      const data = this.tags.map(tag => ({name: tag.text, value: tag.count}))
      const colors = this.tags.map(tag => tag.color) // 从数据中获取颜色
      const option = {
        color: colors,
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '40%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      chart.setOption(option)
    },
    queryArticle(id) {
      console.log("查询文章:", id)
    }
  },
  mounted() {

    //  绘制Echarts
    let chart = echarts.init(this.$refs.tagEcharts)
    this.renderChart(chart)

    //  定义交叉动画 left
    const observer_left = new IntersectionObserver((entries, observer) => {

      for (let entry of entries) {
        if (entry.isIntersecting) {
          //   交叉了
          entry.target.classList.add('animate__animated', 'animate__slideInLeft', 'data-wow-duration="1s"')
          observer.unobserve(entry.target)
        }
      }

    }, {
      root: null, // 配置监视元素和哪个元素进行交叉, null即为视口
      rootMargin: '-10px', // 交叉范围是否扩展
      threshold: 0 // 0 发生交叉就回调, 1 完全交叉触发回调
    });

    let leftBox = document.getElementsByClassName('article-item-outer-box-left');
    for (let box of leftBox) {
      observer_left.observe(box)
    }


    // 交叉动画right
    const observer_right = new IntersectionObserver((entries, observer) => {

      for (let entry of entries) {
        if (entry.isIntersecting) {
          //   交叉了
          entry.target.classList.add('animate__animated', 'animate__slideInRight', 'data-wow-duration="1s"')
          observer.unobserve(entry.target)
        }
      }

    }, {
      root: null, // 配置监视元素和哪个元素进行交叉, null即为视口
      rootMargin: '-10px', // 交叉范围是否扩展
      threshold: 0 // 0 发生交叉就回调, 1 完全交叉触发回调
    });

    let rightBox = document.getElementsByClassName('article-item-outer-box-right');
    for (let box of rightBox) {
      observer_right.observe(box)
    }

  }
}

</script>

<style scoped>

@media screen and (max-width: 1024px) {
  .outer-box {
    display: block !important;
  }
}


.card-border {
  border-radius: 10px;
  border: 2px solid var(--box-border-color);
  transition: all .2s ease;
}

.card-border:hover {
  border: 2px solid var(--active-border-color) !important;

}

/* 侧边栏头像 */

.myAvatar {
  transition: all .35s ease;
}

.myAvatar:hover {
  transform: rotate(360deg) scale(1.2);

}

/* 名片标题开始 */
/* This is an example, feel free to delete this code */
.tooltip-container {
  --background: var(--active-border-color);
  --color: var(--text-primary-color);
  position: relative;
  cursor: url('@/assets/img/helloCursor.png'), pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color);
  padding: 0.2em;
  border-radius: 10px;
  text-transform: uppercase;
  height: 50px;
  width: 80%;
  display: grid;
  place-items: center;
  border: 2px solid var(--color);
}

.text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform-origin: -100%;
  transform: scale(1);
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.tooltip-container span:last-child {
  position: absolute;
  top: 0%;
  left: 100%;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  opacity: 1;
  background-color: var(--background);
  z-index: -1;
  border: 2px solid var(--background);
  transform: scale(0);
  transform-origin: 0;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  display: grid;
  place-items: center;
}

.tooltip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.3em 0.6em;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  background: var(--background);
  z-index: 1;
  border-radius: 8px;
  scale: 0;
  transform-origin: 0 0;
  text-transform: capitalize;
  font-weight: 400;
  font-size: 16px;
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
}

.tooltip::before {
  position: absolute;
  content: "";
  height: 0.6em;
  width: 0.6em;
  bottom: -0.2em;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  background: var(--background);
}

.tooltip-container:hover .tooltip {
  top: -80%;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  scale: 1;
  animation: shake 0.5s ease-in-out both;
}

.tooltip-container:hover {
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  border-color: transparent;
}

.tooltip-container:hover span:last-child {
  transform: scale(1);
  left: 0;
}

.tooltip-container:hover .text {
  opacity: 0;
  top: 0%;
  left: 100%;
  transform: scale(0);
}

@keyframes shake {
  0% {
    rotate: 0;
  }

  25% {
    rotate: 7deg;
  }

  50% {
    rotate: -7deg;
  }

  75% {
    rotate: 1deg;
  }

  100% {
    rotate: 0;
  }
}

.my-card-data > div {
  text-align: center;
  flex: 1;
  color: var(--text-second-color);
  transition: all .2s ease;
}

.my-card-data > div:hover {
  color: var(--active-border-color);
}

/* 名片标题结束 */

/* note-card */
.note-card {
  position: relative;
  transition: all .2s ease;
  font-size: 0.8rem;
}

.note-card:hover {
  border: 2px solid var(--active-border-color) !important;
}

.note-card:before {
  content: '';
  width: 0px;
  height: 100%;
  position: absolute;
  border: 1px solid #fa4848;
  left: 9px;
  top: 0;
}

/* tag card */

.tag-card {
  position: relative;
  padding: 10px 0;
  margin-top: 10px;
}

.tag-title-point {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  top: 5px;
}

.tag-title-point:first-child {
  background-color: #fd2d1b;
  left: 5px;
}

.tag-title-point:nth-child(2) {
  background-color: #ffb016;
  left: 20px;
}

.tag-title-point:nth-child(3) {
  background-color: #44ef48;
  left: 35px;
}


.tag-list-item {
  transition: all .2s ease;
  cursor: pointer;
  color: #fff;
}

.tag-list-item:hover {
  filter: brightness(90%);
}


/* link-card */
.link-card .iconfont {
  font-size: 1.2rem;
}

.link-card .iconfont:hover {
  color: var(--active-border-color) !important;
}


/* 文章列表开始 */
.article-item-outer-box {

  margin-top: 10px;
  border: 2px solid var(--box-border-color);
  border-radius: 10px;
  transition: all .2s ease;
  overflow: hidden;

  box-shadow: 5px 5px 10px #414141;


}

.article-item-outer-box:hover {
  border: 2px solid var(--active-border-color);
  box-shadow: 5px 5px 10px var(--active-border-color);


}

.thumbnail-box {

}


/* 手机端文章列表样式 */
@media screen and (max-width: 1024px) {
  .article-info-box {
    padding: 7px;
  }

  .thumbnail-box {
    width: 100%;
    height: 180px;
  }
}

/* PC端文章列表样式 */
@media screen and (min-width: 1025px) {
  .article-item-outer-box {
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .thumbnail-box {
    width: 220px;
    height: 220px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .article-info-box {
    padding: 0 5px;
    flex: 1;
  }

  .article-description {

  }

}

.article-title {
  height: 50px;
  line-height: 50px;
  text-align: left;
  font-weight: bold;
  font-size: 1.5rem;
}

.thumbnail-box {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.article-title {
  position: relative;
  margin-bottom: 10px;
}

.article-title:after {
  content: '';
  width: 40%;
  height: 0;
  border: 4px solid var(--active-border-color);
  position: absolute;
  border-radius: 5px;
  left: 0;
  bottom: 0;
}

.article-description {
  margin-bottom: 10px;
  color: var(--text-second-color);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* 文章列表结束 */


</style>